<style>
	table th, table td{
		text-align: center !important;
	}
	.page-content .portlet .portlet-search-body .search-item{
		width: 15%;
	}
    .tt-dropdown-menu{
        width: 500px !important;
    }
    #purchaseDetail table th,#purchaseDetail table tr,
    #orderViewItemTab table th,#orderViewItemTab table tr{
        font-size: 12px;
    }
    #purchaseDetail table td ,#orderViewItemTab table td{
        padding: 2px;
    }
    .showCell{
        width: 100%;
        border-style: none;
        background-color: transparent;
        text-align: center;
    }
    .editCell{
        width: 100%;
    }
</style>

<div class="portlet">
    <div class="portlet-actions">
        <button class="btn blue btn-sm rounded" ng-click="grid.add()"><i class="fa fa-plus"></i> 新增</button>
    </div>
    <form class="portlet-search-body" name="queryForm">
        <input type="text" class="form-control search-item" ng-model="applicant" placeholder="申请人">

        <div class="search-item">
            <button class="btn btn-icon-only default"><i class="fa fa-chevron-right"></i></button>
            <button class="btn btn-sm query rounded" ng-click="query();"><i class="fa fa-search"></i> 查询</button>
            <button class="btn btn-sm reset rounded" ng-click="reset();"><i class="fa fa-eraser"></i> 重置</button>
        </div>
    </form>
    <div class="portlet-body">
        <table ed-grid="grid"  class="table table-striped table-bordered table-advance table-hover"
               data-options="url: 'stockPurchase/query.do', modelText: 'xx列表', form: 'queryForm', modal: 'modal'">
            <thead>
            <tr>
                <th data-options="field: '_index'"></th>
                <th data-options="field: 'listId'">采购单号</th>
                <th data-options="field: 'deptName'">采购部门</th>
                <th data-options="field: 'applicantName'">申请人</th>
                <th data-options="field: 'approverName'">审批人</th>
                <th data-options="field: 'makeTime | limitTo : 10'">采购时间</th>
                <th data-options="field: 'comment'">采购原因</th>
                <th data-options="field: 'remark'">备注</th>
                <th>操作</th>
            </tr>
            </thead>
        </table>
    </div>
</div>

<div ed-modal="modal" data-options="title: 'xxxx', static: true, width: 800, defaultButton:true,onHidden:'reset'">
    <form action="#" class="form-horizontal w5c-form" w5c-form-validate novalidate name="validateForm">
        <div class="form-body">

        	<div class="form-group">
                <label class="col-md-2 control-label"><span style="color:red">* </span>采购部门</label>
                <div class="col-md-4">
                    <div ed-combotree data-options="idField: 'deptId', textField: 'deptName', parentIdField: 'parentDeptId', returnId: false, url: 'department/tree.do'"
                         name="deptId" ng-model="stockPurchase.deptId" placeholder="请选择部门" required></div>
                </div>
                <label class="col-md-2 control-label"><span style="color:red">* </span>采购时间</label>
                <div class="col-md-4">
                    <div class="input-group">
                        <input type="text" class="form-control" ed-date-picker name="makeTime" ng-model="stockPurchase.makeTime" required>
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                    </div>
                </div>

            </div>
        	<div class="form-group">
                <label class="col-md-2 control-label"><span style="color:red">* </span>申请人</label>
                <div class="col-md-4">
                    <div emp-select name="applicant" ng-model="stockPurchase.applicant" required></div>
                </div>
                <label class="col-md-2 control-label"><span style="color:red">* </span>审批人</label>
                <div class="col-md-4">
                    <div emp-select name="approver" ng-model="stockPurchase.approver" required></div>
                </div>
            </div>
        	<div class="form-group">
                <label class="col-md-2 control-label">采购原因</label>
                <div class="col-md-4">
                    <input type="text" class="form-control" name="comment" ng-model="stockPurchase.comment">
                </div>
                <label class="col-md-2 control-label">备注</label>
                <div class="col-md-4">
                    <input type="text" class="form-control" name="remark" ng-model="stockPurchase.remark">
                </div>
            </div>
        </div>

        <!--采购单明细-->
        <div id="purchaseDetail">   <!--style="overflow:auto;height: 350px;"-->
            <div class="dataTables_wrapper dt-bootstrap no-footer __web-inspector-hide-shortcut__">
                <table class="table table-striped table-bordered table-advance table-hover dataTable no-footer" style="width:100%;">
                    <thead>
                        <tr role="row">
                            <th class="sorting_disabled" style="width: 28%;">名称</th>
                            <th class="sorting_disabled" style="width: 20%;">类型</th>
                            <th class="sorting_disabled" style="width: 10%;">单位</th>
                            <th class="sorting_disabled" style="width: 30%;">规格</th>
                            <th class="sorting_disabled" style="width: 10%;">数量</th>
                            <th class="sorting_disabled" style="width: 1%;padding: inherit;">
                                <button type="button" style="color:#2386ca;width: 30px; height: 30px;" ng-click="addItem();">
                                    <i class="fa fa-plus"></i>
                                </button>
                            </th>
                        </tr>
                    </thead>

                    <tbody>
                        <tr id="tr{{$index+1}}" role="row"  ng-repeat="item in stockPurchaseDetail" on-finish-render-filters>
                            <td>
                                <div class="input-group" ng-show="true" ng-blur="isShow1=true">
                                    <input ng-show="isShow1==true" type="text" ng-class="{true: 'showCell', false: 'editCell'}[isShow1]"
                                           ng-mouseenter="mouseEnter($index, 1)"
                                           ng-init="isShow1=true" class="form-control" name="stockName" ng-model="item.stockName" required>

                                    <!--<input type="text" ng-show="isShow1==false" class="form-control"
                                           ng-mouseleave="mouseLeave($index, 1)"
                                           name="stockName" ng-model="item.stockName" required>-->
                                    <div stock-search stock-ret="stockRet($index)" ng-show="isShow1==false"
                                         ng-mouseleave="mouseLeave($index, 1)" ng-model="item.stockName"
                                         name="stockName" style="height: 32px;"></div>

                                    <span class="input-group-btn" ng-show="isShow1==false" ng-mouseleave="mouseLeave($index, 1)">
                                        <button class="btn btn-default" style="height: 32px;" type="button" ng-click="stockSelect($index+1)">
                                            <i class="fa fa-search"></i>
                                        </button>
                                    </span>
                                </div>
                            </td>

                            <td>
                                <input ng-show="isShow2==true" type="text" ng-class="{true: 'showCell', false: 'editCell'}[isShow2]"
                                       ng-mouseenter="mouseEnter($index, 2)"
                                       ng-init="isShow2=true" class="form-control" name="typeName"  ng-model="item.typeName" required>

                                <div ng-show="isShow2==false" ed-combotree data-options="idField: 'typeId', textField: 'typeName', parentIdField: 'parentTypeId', returnId: false, url:'stockType/tree.do'"
                                     ng-mouseleave="mouseLeave($index, 2)"
                                     ng-model="item.typeId" style="height: 32px;" required></div>

                            </td>

                            <td>
                                <input type="text" ng-class="{true: 'showCell', false: 'editCell'}[isShow3]"
                                       ng-init="isShow3=true" ng-focus="isShow3=false" ng-blur="isShow3=true;"
                                       class="form-control" name="unit" ng-model="item.unit" required>
                            </td>

                            <td>
                                <input type="text" ng-class="{true: 'showCell', false: 'editCell'}[isShow4]"
                                       ng-init="isShow4=true" ng-focus="isShow4=false" ng-blur="isShow4=true"
                                       class="form-control" name="spec" ng-model="item.spec" required>
                            </td>

                            <td>
                                <input type="text" ng-class="{true: 'showCell', false: 'editCell'}[isShow5]"
                                       ng-init="isShow5=true" ng-focus="isShow5=false" ng-blur="isShow5=true"
                                       class="form-control" name="num" ng-model="item.num" pattern="^(0|[1-9][0-9]*)$" required>
                            </td>

                            <td style="text-align: center;">
                                <button type="button"  ng-style="{'color': item.orderItemId ? '' : '#2386ca'}" ng-click="deleteItem(item);" style="width: 30px; height: 30px;">
                                    <i class="glyphicon glyphicon-remove"></i>
                                </button>
                            </td>
                        </tr>

                    </tbody>
                </table>
            </div>
        </div>

        <div class="form-actions">
            <button type="button" class="btn blue btn-sm rounded" w5c-form-submit="grid.save();">
                <i class="fa fa-check"></i> 确定
            </button>
            <button type="button" class="btn default btn-sm rounded" ng-click="grid.cancel();">
                <i class="fa fa-times"></i> 取消
            </button>
        </div>
    </form>
</div>

<!--选择库存材料-->
<div ed-modal="modalStock" data-options="title: 'xxxx', static: true, width: 720, defaultButton:false,onHidden:'reset'">
    <div class="portlet">
        <form class="portlet-search-body" name="queryFormStock" style="display: -webkit-box;">

            <input type="text" class="form-control search-item" ng-model="stockName" placeholder="材料名称" style="width: 200px">
            <input type="text" class="form-control search-item" ng-model="typeName" placeholder="类型" style="width: 200px; margin-left: 10px;">

            <div class="search-item">
                <button class="btn btn-sm query rounded" ng-click="query();" style="margin-top: 2px; margin-left: 10px"><i class="fa fa-search"></i> 查询</button>
                <button class="btn btn-sm reset rounded" ng-click="reset();" style="margin-top: 2px;"><i class="fa fa-eraser"></i> 重置</button>
            </div>
        </form>
        <div class="portlet-body">
            <table ed-grid="gridStock" style="width: 100%" class="table table-striped table-bordered table-advance table-hover"
                   data-options="url: 'stock/query.do', modelText: '库存材料', form: 'queryFormStock'">
                <thead>
                    <tr>
                        <th style="width: 4%">操作</th>
                        <th style="width: 24%" data-options="field: 'stockName'">材料名称</th>
                        <th style="width: 24%" data-options="field: 'typeName'">类型</th>
                        <th style="width: 24%" data-options="field: 'brand'">品牌</th>
                        <th style="width: 24%" data-options="field: 'spec'">规格</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>

